<template>
	<view class="content" style="padding-bottom:210rpx;">
		<door-navbar :bgColor="navbarShow?'transparent':'#fff'" :text="navbarShow?'':'详情'" :isDetailIcon="true">
		</door-navbar>
		<view class="title_count">
			<text>校区名称：</text>
			<text>{{detail.deptName}}</text>			
		</view>		
		<view style="width: 686rpx;margin: 0 auto;margin-top:24rpx;padding: 32rpx;color: #333;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.04);border-radius: 30rpx;">
			<view style="margin-bottom: 16rpx;color: #333;font-size: 28rpx;font-weight: 900;">
				校区介绍
			</view>
			<u-parse class="detail_info" :content="detail.introduce"></u-parse>
			<image :src="detail.wxcode" mode="widthFix"></image>
		</view>		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>	
	export default {
		components: {			
		},
		data() {
			return {
				payType: 1,
				deptId: '',
				show: true,
				navbarShow: true,
				detail: {},
				btnStatus: {
					borderRadius: '20rpx',
					padding: '28rpx 0',
					color: '#fff',
					fontSize: '32rpx',
				},
				price: '',
				showBowDetail: false,
				userInfo: '',
				consignmentRecordList:[]
			}
		},
		async onLoad(e) {
			if (e.deptId) {
				this.deptId = e.deptId;
				this.getDetail()
			}			
		},
		onPageScroll(e) {
			if (e.scrollTop >= 150) {
				this.navbarShow = false;
			} else {
				this.navbarShow = true;
			}
			if (e.scrollTop >= 150) {
				this.show = false;
			} else {
				this.show = true;
			}
		},
		methods: {
			async getDetail() {
				let res = await this.$u.api.getSchoolDetail({
					deptId: this.deptId,
				});
				let detail = {
					deptId: res.data.deptId,
					ancestors: res.data.ancestors,
					createTime: res.data.createTime,
					delFlag: res.data.delFlag,
					deptName: res.data.deptName,
					email: res.data.email,
					id: res.data.id,
					integral: res.data.integral,
					introduce: res.data.detail,
					leader: res.data.leader,
					orderNum: res.data.orderNum,
					parentId: res.data.parentId,
					phone: res.data.phone,
					status: res.data.status,
					wxcode: res.data.wxcode
				}
				this.detail = detail;
			},
			share() { // 分享
				uni.navigateTo({
					url: '/pages/mine/share'
				})
			},			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ attribute {
		font-size: 80rpx;
	}
	.content {
		padding: 0;
		padding-bottom: 40rpx;
		background-color: #fff;

		.detail_img {
			width: 100vw;
			height: 100vw;
			position: relative;

			.sell_price {
				position: absolute;
				bottom: 0;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				background: rgba(0, 0, 0, 0.4);
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				border-radius: 0 0 60rpx 60rpx;
			}

			.sell_all_num {
				position: absolute;
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 16rpx;
				padding-right: 16rpx;
				left: 40rpx;
				bottom: 40rpx;
				background: url('@/static/image/num_border.png')no-repeat;
				background-size: 100% 100%;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.id_no {
				position: absolute;
				left: 40rpx;
				bottom: 40rpx;
				height: 36rpx;
				line-height: 36rpx;
				background: url('@/static/image/small_border.png') no-repeat;
				background-size: 100% 100%;
				display: inline-block;
				font-size: 20rpx;
				border-radius: 8rpx;
				padding: 0 12rpx 0 26rpx;
				text-align: center;
				margin-top: 12rpx;

				&::before {
					content: "";
					display: block;
					width: 38rpx;
					height: 40rpx;
					background: url('@/static/image/no.png') no-repeat;
					background-size: 100% 100%;
					position: absolute;
					top: -2rpx;
					left: -20rpx;

				}
			}
		}

		.detail_info {
			margin-top: 40rpx;
		}

		.title {
			// padding: 34rpx 32rpx;
			width: calc(100vw - 64rpx);
			margin: 24rpx auto;
			text-align: center;
			flex-wrap: nowrap;
			font-size: 32rpx;
			font-weight: 700;
			color: #333;

			&_count {
				margin-top: 24rpx;
				background-color: #fff;
				width: 100%;
				border-radius: 20rpx;
				color: #333;
				padding: 28rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.04);
			}

			&_tip {
				// background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #8d8d8e 51.04%, rgba(0, 0, 0, 0) 100%);
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 16rpx;
				&_box {
					display: inline-flex;
					box-sizing: border-box;
					height: 44rpx;
					line-height: 44rpx;
					font-size: 24rpx;
					border: 1px solid #80f5cf;
					color: #1CC7C2 !important;
					font-size: 28rpx;
					border-radius: 10rpx;
					.limit {
						padding: 0rpx 20rpx;
						background: #cdf8f7 ;
						height: 40rpx;
						border-radius: 8rpx;
						color: #3AE0AA !important;
						border-right: 1px solid #80f5cf;
						line-height: 40rpx;	
						font-weight: 600;
					}
					.num {
						padding: 0 20rpx;
						border-top-right-radius: 10rpx !important;
						border-bottom-right-radius: 10rpx !important;
						font-weight: 600;
					}
				}
				// &_box {
				// 	display: inline-flex;
				// 	box-sizing: border-box;
				// 	height: 44rpx;
				// 	line-height: 44rpx;
				// 	font-size: 24rpx;
				// 	border: 1px solid #80f5cf;
				// 	margin: 12rpx 0 20rpx;
				// 	margin-top: 20rpx;
				// 	color: #1CC7C2 !important;
				// 	font-size: 28rpx;
				// 	border-radius: 5px;

				// 	.limit {
				// 		padding: 0 20rpx;
				// 		background: #cdf8f7 ;
				// 		color: $time-color-fff;
				// 		border-radius: 50rpx;
				// 		border-radius: 5px;
				// 		color: #3AE0AA !important;
				// 		font-family: 'Alibaba PuHuiTi';
				// 		border: 1px solid #80f5cf;
				// 		line-height: 40rpx;		
				// 	}

				// 	.num {
				// 		padding: 0 20rpx;
				// 		border-top-right-radius: 10rpx !important;
				// 		border-bottom-right-radius: 10rpx !important;
				// 		font-weight: 600;
				// 		// background: linear-gradient(105deg, transparent 0px, #fff 0);
				// 	}
					
				// }
			}
		}

		.info {
			width: calc(100vw - 64rpx);
			margin: 24rpx auto;
			border-radius: 30rpx;
			// margin-bottom: 40rpx;
			background-color: #fff;
			padding: 24rpx 40rpx;
			color: #333 !important;
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.04);
		}

		.market_info {
			width: calc(100vw - 80rpx);
			margin-left: 40rpx;

			&_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 40rpx;
				border-bottom: 2rpx solid #1F223F;

				&_item {
					width: 300rpx;
					height: 140rpx;
					text-align: center;
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #8588AA;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.price {
						margin-top: 20rpx;
						font-size: 36rpx;
						color: #FF7D51;
						display: flex;
						justify-content: center;
					}
				}
			}

			&_seller {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 40rpx;

				.user {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name {
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 32rpx;
						color: #C6C8DB;
					}
				}

				.pirce {
					display: flex;
					align-items: center;
					font-weight: bold;
					color: #fff;
					font-size: 50rpx;

				}
			}
		}

		.tips {
			// width: 100%;
			width: calc(100vw - 64rpx);
			margin: 0 auto;
			background-color: #fff;
			color: #333;
			padding: 28rpx 20rpx;
			// margin-left: 40rpx;
			margin-top: 20rpx;
			// background: linear-gradient(45deg, #3C93A7, #3447B1);
			border-radius: 20rpx;
			box-sizing: border-box;
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.04);

			&_title {

				font-size: 24rpx !important;
				line-height: 44rpx;
				letter-spacing: 2rpx;
				display: flex;
				// justify-content: center;
				// align-items: center;
				font-weight: 700;
				width: 100%;
				// background-color: #fff;
				color: #333;
				padding-bottom: 10rpx;
				border-bottom: 1px solid #e5e5e5;

				text {
					margin: 0 12rpx;
				}
			}

			&_text {
				padding: 36rpx 0;
				font-size: 24rpx;
			}

			&_body {
				padding: 28rpx 40rpx;
				// margin-top: 36rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.popup_box {

			width: 100vw;
			background-color: rgba(255, 255, 255, 0.7);
			backdrop-filter: blur(30px);
			padding: 24rpx 48rpx;
			position: relative;
			border-radius: 40rpx 40rpx 0 0;

			.line {
				position: absolute;
				width: calc(100vw - 100rpx);
				height: 2rpx;
				background-color: $time-color-primary;
				top: 130rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			&_title {
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			&_procedure {
				margin: 24rpx 0 44rpx 0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&_group {
					width: 160rpx;
					padding: 12rpx 0;
					margin-top: 60rpx;
					text-align: center;
					border-radius: 8rpx;
					// border: 2rpx solid $time-color-primary;
					font-size: 20rpx;
					// background-color: #05061B;
					z-index: 99;
				}
			}
		}
	}

	.cell_right_text {
		width: 50vw;
		text-align: right;
		color: #333;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.btn_list {
		width: 100vw;
		position: fixed;
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
		background-color: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(30px);
		padding: 40rpx 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.open_btn {
			width: 172rpx;
			height: 172rpx;
			text-align: center;
			line-height: 172rpx;
			background-color: #1cc7c2;
			border-radius: 172rpx;
			box-shadow: inset 0 4rpx 14rpx 0 rgba(0, 0, 0, 0.5);
		}
	}

	/deep/ .u-cell-group__title {
		width: 100%;
		text-align: left;
		box-sizing: border-box;

		.u-cell-group__title__text {
			letter-spacing: 2rpx;
			font-size: 24rpx;
			display: block;
			font-weight: 700;
			color: #333333;
			line-height: 44rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
		}
	}

	.modal_content {
		width: 100%;
		padding: 20rpx 0;
	}
	.title_count{
		margin-top: 24rpx;
		background-color: #fff;
		width: 686rpx !important;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding: 28rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.04);
	}
	.slot-icon {
			width: 21rpx;
			height: 21rpx;
			background:#1cc7c2;
			 box-shadow: 0px 0px 3px 1px #27bfb380;
			border-radius: 100px;
			font-size: 12px;
			color: #fff;
			line-height: 21px;
			text-align: center;
		}
	/deep/ .u-steps-item__content--column{
		flex-direction: row;
	}
	/deep/.u-cell__body {
		padding: 20rpx 0;
	}

	/deep/ .u-line {
		border-color: #242748 !important;
	}

	/deep/ .u-transition {
		z-index: 9 !important;
	}

	/deep/.u-steps-item__wrapper {
		background-color: transparent;
	}

	/deep/ .u-text__value--content {
		margin: 0 auto;
		color: $time-color-primary;
	}
	/deep/ .uni-input-input{
		color: #333 !important;
	}
	/deep/ .cancel_btn{
		color: #999;
		border: 1px solid #999;
	}
	/deep/ uni-image>div, uni-image>img {
		width: 83%;
	}
</style>
